<template>
  <div class="mzjc">
    <div class="main">
      <el-row>
        <el-col :span="6">
          年龄分布
          <el-table
            :data="isData.年龄分布"
            v-loading="isLoading"
            border
            style="width: 192px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(157,201,210)',
              fontFamily: 'FangSong',
            }"
          >
            <el-table-column align="center" label="年龄" prop="年龄" width="90">
            </el-table-column>
            <el-table-column
              align="center"
              label="数量"
              prop="数量"
              width="100"
            >
            </el-table-column>
          </el-table>
          <qiun-vue-ucharts
            type="pie"
            :opts="opts1"
            :chartData="chartData1"
            style="margin-top: 50px"
          />
        </el-col>
        <el-col :span="6">
          候诊与已就诊人次
          <el-table
            :data="isData.各科室"
            v-loading="isLoading"
            border
            style="width: 100%"
            height="700"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(157,201,210)',
              fontFamily: 'FangSong',
            }"
          >
            <el-table-column align="center" label="科室" prop="name">
            </el-table-column>
            <el-table-column
              align="center"
              label="门诊候诊人次"
              prop="待诊人次"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="门诊就诊人次"
              prop="就诊人次"
            >
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <b>候诊趋势图</b> <br />
          <i>门诊候诊人次</i>
          <p style="color: red; text-align: center">门诊挂号未就诊人次折线图</p>
          <qiun-vue-ucharts
            type="line"
            :opts="opts2"
            :chartData="chartData2"
            style="height: 300px"
          />
          <b>就诊趋势图</b> <br />
          <i>门诊就诊人次</i>
          <p style="color: red; text-align: center">门诊挂号就诊人次折线图</p>
          <qiun-vue-ucharts
            type="line"
            :opts="opts3"
            :chartData="chartData3"
            style="height: 300px"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import qiunVueUcharts from "@qiun/vue-ucharts";
export default {
  components: {
    qiunVueUcharts,
  },
  data() {
    return {
      isData: {},
      tableData: [],
      isLoading: false,
      chartData1: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts1: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
          },
        },
      },
      chartData2: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts2: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
          },
        },
      },
      chartData3: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts3: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
          },
        },
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$get("/Data/RealTimeVisits?orgId=3168").then((res) => {
        this.isData = res.Data;
        this.getServerData1();
        this.getServerData2();
        this.getServerData3();
      });
    },
    getServerData1() {
      var data = [];
      for (var i in this.isData.年龄分布) {
        var item = {
          name: this.isData.年龄分布[i].年龄,
          value: this.isData.年龄分布[i].数量,
        };
        data.push(item);
      }
      let res = {
        series: [
          {
            data: data,
          },
        ],
      };
      this.chartData1 = JSON.parse(JSON.stringify(res));
    },
    getServerData2() {
      var categories = [];
      var series = [];
      for (var i in this.isData.各时段) {
        categories.push(this.formatDateTime(this.isData.各时段[i].时间段));
        series.push(this.isData.各时段[i].待诊人次);
      }
      let res = {
        categories: categories,
        series: [
          {
            name: "人数",
            lineType: "dash",
            data: series,
          },
        ],
      };
      this.chartData2 = JSON.parse(JSON.stringify(res));
    },
    getServerData3() {
      var categories = [];
      var series = [];
      for (var i in this.isData.各时段) {
        categories.push(this.formatDateTime(this.isData.各时段[i].时间段));
        series.push(this.isData.各时段[i].就诊人次);
      }
      let res = {
        categories: categories,
        series: [
          {
            name: "人数",
            lineType: "dash",
            data: series,
          },
        ],
      };
      this.chartData3 = JSON.parse(JSON.stringify(res));
    },
    formatDateTime(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return hours + ":" + minutes;
    },
  },
};
</script>

<style scoped lang="scss">
.mzjc {
  background-color: #fff;
  height: calc(100vh - 46px);
  padding: 15px;
  .main {
    margin-top: 10px;
  }

  .page {
    text-align: right;
    margin-top: 15px;
  }
}
</style>